
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Swiper Demos</title>
<meta name="description" content="Swiper demos and examples">
<meta name="keywords" content="swiper, mobile slider, touch slider, ios slider, android slider, touch gallery, jquery slider, jquery mobile slider, web app slider, native app slider, free slider, swipe slider">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<link rel="stylesheet" href="css/style.css?v=1.8">
<link rel="stylesheet" href="css/swiper-demos.css?v=1.8">
<script  src="js/libs/jquery-1.7.1.min.js"></script>
<!-- Swiper -->
<script  src="js/idangerous.swiper-1.8.min.js"></script>
<!-- Swiper Scrollbar plugin -->
<script  src="js/idangerous.swiper.scrollbar-1.0.js"></script>
<!-- Demos code -->
<script  src="js/swiper-demos.js?v=1.8"></script>
</head>

<body>

<div role="main" class="main">
  
  <h2 class="sw-title">Demos</h2>
  <p>You can download all these demos and hook into the code from GitHub <a href="https://github.com/nolimits4web/Swiper/tree/master/swiper-demos" target="_blank">here</a>.</p>
  <p class="demo-title">Default</p>
  <div class="home-device"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a>
    <div class="swiper-main">
      <div class="sm-free"></div>
      <div class="swiper-container swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide"> <img src="img/slider1-1.png"> </div>
          <div class="swiper-slide"> <img src="img/slider1-2.png"> </div>
          <div class="swiper-slide">
            <div class="content-slide">
              <h2 style="margin-top: 0;">Slide with HTML</h2>
              <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p>
            </div>
            <div class="content-slide cs-1">
              <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur tortor vitae neque luctus a tempor lacus pretium. Mauris eget ligula at justo molestie cursus. In vitae sem id neque pharetra luctus non vel felis.</p>
            </div>
            <div class="content-slide cs-2">
              <p style="margin: 0;">Aliquam ut laoreet ligula. Quisque vehicula lectus nec orci viverra porttitor. Donec sodales lectus sit amet nunc congue ut mattis augue rhoncus.</p>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination pagination1"></div>
  </div>
  <p class="demo-title">Vertical Mode</p>
  <div class="swiper-container swiper-v">
    <div class="pagination-v"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide blue-slide">
        <h2>Vertical Mode</h2>
        <p>Swipe to the Top or to the Bottom</p>
      </div>
      <div class="swiper-slide red-slide">
        <h2>Slide 2</h2>
        <p>Keep swiping</p>
      </div>
      <div class="swiper-slide orange-slide">
        <h2>Slide 3</h2>
        <p>The last one</p>
      </div>
    </div>
  </div>

  <p class="demo-title">Dynamic Slides</p>
  <p style="text-align:center">This demo shows how easy and fun to work <a href="api.php#slidesapi">Slides API</a>.</p>
  <div class="swiper-container swiper-dynamic">
    <div class="swiper-wrapper">
      <div class="swiper-slide blue-slide">
        <h2>Slide 1</h2>
        <p>Swipe to the Top or to the Bottom</p>
      </div>
      <div class="swiper-slide red-slide">
        <h2>Slide 2</h2>
        <p>Keep swiping</p>
      </div>
      <div class="swiper-slide orange-slide">
        <h2>Slide 4</h2>
        <p>The last one</p>
      </div>
      <div class="swiper-slide green-slide">
        <h2>Slide 5</h2>
        <p>The last one</p>
      </div>
    </div>
  </div>
  <div class="pagination-sd"></div>
  <p class="swiper-dynamic-links">
    <a class="sdl-append" href="#">Append slide</a> 
    <a class="sdl-prepend" href="#">Prepend slide</a> 
    <a class="sdl-swap" href="#">Swap 1st and 2nd slides</a> 
    <a class="sdl-insert" href="#">Insert after first slide</a> 
    <a class="sdl-remove1" href="#">Remove first slide</a> 
    <a class="sdl-removel" href="#">Remove last slide</a> 
    <a class="sdl-remove2" href="#">Remove 2nd slide</a>
  </p>

  <p class="demo-title">Scroll Container</p>
  <p style="text-align:center">This demo also uses a <a href="plugins.php">Scrollbar</a> plugin.</p>
  <div class="swiper-container swiper-scroll-container">
    <div class="swiper-wrapper" >
      <div class="swiper-slide" style="background:#fff; padding:20px">
        <div class="red-slide" style="width:250px; float:left; font-size:25px; line-height:30px; text-align:center">
          <p style="color:#fff; font-weight:bold; font-style:italic;">Your dreams come true:) That is a simple single scrollable area! No slides, no nothing, just pure area!</p>
        </div>
        <div style="width:300px; float:left; margin-left:20px">
          <p>Here goes some text</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum ipsum auctor nulla consectetur sed porta nunc placerat.</p>
          <p>Nulla dui augue, sollicitudin egestas consequat a, consequat quis neque. Sed at mauris nunc. Donec rutrum leo id risus congue convallis. Maecenas ultrices condimentum velit, nec tincidunt lorem convallis consequat. Nulla elementum consequat quam eu euismod</p>
        </div>
        <div style="width:500px; float:left; margin-left:20px">
          <p>Here goes wide image</p>
          <p><img src="img/bb.jpg"></p>
        </div>
        <div class="blue-slide" style="width:350px; float:left; font-size:28px; line-height:30px; text-align:center; margin-left:20px; padding:25px">
          <p style="color:#fff; font-weight:bold; font-style:italic;">You can make it any width/height, horizontal (like this one) or vertical, with any styling and with any HTML content!</p>
        </div>
      </div>
    </div>
    <div class="swiper-scrollbar"></div>
    <style>
	/*
	Bad practise to use inline styles but good place to show you as an example
	*/
	.swiper-scrollbar {
		width: 100%;
		height: 4px;
		border-radius: 10px;
		position: absolute;
		left:0;
		bottom:2px;
		-ms-touch-action: none;
		background: none
	}
	.swiper-scrollbar-drag {
		height: 100%;
		width: 100%;
		position: relative;
		background: rgba(0,0,0,0.5);
		border-radius: 10px;
		
	}
	</style>
  </div>
  <p class="demo-title">Free Mode</p>
  <div class="swiper-container swiper-free">
    <div class="pagination-free"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide">
        <h2>Free Mode</h2>
        <p>has no fixed positions</p>
      </div>
      <div class="swiper-slide blue-slide">
        <h2>Fluid-Mode Enabled</h2>
        <p>When you release the slide, it keep moving for a while</p>
      </div>
      <div class="swiper-slide orange-slide">
        <h2>Slide 3</h2>
        <p>Keep swiping</p>
      </div>
      <div class="swiper-slide green-slide">
        <h2>Slide 4</h2>
        <p>Keep swiping</p>
      </div>
      <div class="swiper-slide pink-slide">
        <h2>Slide 5</h2>
        <p>The last one</p>
      </div>
    </div>
  </div>
  <p class="demo-title">Carousel Mode</p>
  <div class="swiper-container swiper-car">
    <div class="pagination-car"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide"> Slide 1 </div>
      <div class="swiper-slide blue-slide"> Slide 2 </div>
      <div class="swiper-slide orange-slide"> Slide 3 </div>
      <div class="swiper-slide green-slide"> Slide 4 </div>
      <div class="swiper-slide pink-slide"> Slide 5 </div>
      <div class="swiper-slide orange-slide"> Slide 6 </div>
      <div class="swiper-slide green-slide"> Slide 7 </div>
      <div class="swiper-slide pink-slide"> Slide 8 </div>
    </div>
  </div>
  <p class="demo-title">Carousel & Loop mode. Infinite Scrolling</p>
  <div class="swiper-container swiper-loop">
    <div class="pagination-loop"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide"> Slide 1 </div>
      <div class="swiper-slide blue-slide"> Slide 2 </div>
      <div class="swiper-slide orange-slide"> Slide 3 </div>
      <div class="swiper-slide green-slide"> Slide 4 </div>
      <div class="swiper-slide pink-slide"> Slide 5 </div>
      <div class="swiper-slide orange-slide"> Slide 6 </div>
      <div class="swiper-slide green-slide"> Slide 7 </div>
      <div class="swiper-slide pink-slide"> Slide 8 </div>
    </div>
  </div>
  <p class="demo-title">Nested Swipers. Vertical Swiper inside of horizontal</p>
  <div class="swiper-container swiper-nested1 swiper-n1">
    <div class="pagination-nested1 pagination-n1"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide"> Slide 1 </div>
      <div class="swiper-slide">
        <div class="swiper-container swiper-nested2 swiper-n2">
          <div class="pagination-nested2 pagination-n2"></div>
          <div class="swiper-wrapper">
            <div class="swiper-slide green-slide">Vertical Slide 1</div>
            <div class="swiper-slide blue-slide">Vertical Slide 2</div>
            <div class="swiper-slide pink-slide">Vertical Slide 3</div>
            <div class="swiper-slide green-slide">Vertical Slide 4</div>
            <div class="swiper-slide blue-slide">Vertical Slide 5</div>
            <div class="swiper-slide pink-slide">Vertical Slide 6</div>
          </div>
        </div>
      </div>
      <div class="swiper-slide orange-slide"> Slide 3 </div>
      <div class="swiper-slide green-slide"> Slide 4 </div>
      <div class="swiper-slide pink-slide"> Slide 5 </div>
      <div class="swiper-slide orange-slide"> Slide 6 </div>
      <div class="swiper-slide green-slide"> Slide 7 </div>
      <div class="swiper-slide pink-slide"> Slide 8 </div>
    </div>
  </div>
  <p class="demo-title">More complex. Nested Swipers + Carousel Mode + Loop Mode</p>
  <div class="swiper-container swiper-nested1 swiper-n11">
    <div class="pagination-nested1 pagination-n11"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide red-slide"> Slide 1 </div>
      <div class="swiper-slide orange-slide"> Slide 2 </div>
      <div class="swiper-slide red-slide"> Slide 3 </div>
      <div class="swiper-slide">
        <div class="swiper-container swiper-nested2 swiper-n22">
          <div class="pagination-nested2 pagination-n22"></div>
          <div class="swiper-wrapper">
            <div class="swiper-slide green-slide">Vertical Slide 1</div>
            <div class="swiper-slide blue-slide">Vertical Slide 2</div>
            <div class="swiper-slide pink-slide">Vertical Slide 3</div>
            <div class="swiper-slide green-slide">Vertical Slide 4</div>
            <div class="swiper-slide blue-slide">Vertical Slide 5</div>
            <div class="swiper-slide pink-slide">Vertical Slide 6</div>
          </div>
        </div>
      </div>
      <div class="swiper-slide pink-slide"> Slide 5 </div>
      <div class="swiper-slide orange-slide"> Slide 6 </div>
      <div class="swiper-slide green-slide"> Slide 7 </div>
      <div class="swiper-slide pink-slide"> Slide 8 </div>
    </div>
  </div>
  <p class="demo-title">Tabs (only external control)</p>
  <div class="tabs"> <a href="#" class="active">Tab 1</a> <a href="#" style="margin:0 17px">Tab 2</a> <a href="#">Tab 3</a> </div>
  <div class="clearfix"></div>
  <div class="swiper-container swiper-tabs">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="content-slide2">
          <h2>Tabs Example</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum tempus turpis ut tempus. Mauris dictum blandit lectus, a dictum erat dictum non. Etiam ultrices convallis interdum. Curabitur varius auctor enim, quis dictum nibh fringilla ut. Sed vel lacus ac odio molestie sodales quis sit amet lacus. Curabitur id porta eros. Fusce in varius nisi.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content-slide2">
          <h2>Tab 2</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum tempus turpis ut tempus. Mauris dictum blandit lectus, a dictum erat dictum non. Etiam ultrices convallis interdum. Curabitur varius auctor enim, quis dictum nibh fringilla ut. Sed vel lacus ac odio molestie sodales quis sit amet lacus. Curabitur id porta eros. Fusce in varius nisi.</p>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="content-slide2">
          <h2>Tab 3</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc interdum tempus turpis ut tempus. Mauris dictum blandit lectus, a dictum erat dictum non. Etiam ultrices convallis interdum. Curabitur varius auctor enim, quis dictum nibh fringilla ut. Sed vel lacus ac odio molestie sodales quis sit amet lacus. Curabitur id porta eros. Fusce in varius nisi.</p>
        </div>
      </div>
    </div>
  </div>
  <p class="demo-title">Puzzle</p>
  <div class="puzzle">
    <div class="swiper-container  p1">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/p/p1-1.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p2-1.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p1-1.jpg"></div>
      </div>
    </div>
    <div class="swiper-container  p2">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/p/p2-2.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p1-2.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p2-2.jpg"></div>
      </div>
    </div>
    <div class="swiper-container  p3">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/p/p1-3.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p2-3.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p1-3.jpg"></div>
      </div>
    </div>
    <div class="swiper-container  p4">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/p/p2-4.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p1-4.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p2-4.jpg"></div>
      </div>
    </div>
    <div class="swiper-container  p5">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/p/p1-5.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p2-5.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p1-5.jpg"></div>
      </div>
    </div>
    <div class="swiper-container  p6">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/p/p2-6.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p1-6.jpg"></div>
        <div class="swiper-slide"><img src="img/p/p2-6.jpg"></div>
      </div>
    </div>
  </div>
  <p class="demo-title">Movies App</p>
  <div class="mc-device">
    <div class="mc1">
      <div class="swiper-container mc-posters">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/1.jpg">
              <div class="m-right">
                <h3>Movie 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/2.jpg">
              <div class="m-right">
                <h3>Movie 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/3.jpg">
              <div class="m-right">
                <h3>Movie 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/4.jpg">
              <div class="m-right">
                <h3>Movie 4</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/5.jpg">
              <div class="m-right">
                <h3>Movie 5</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/6.jpg">
              <div class="m-right">
                <h3>Movie 6</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/7.jpg">
              <div class="m-right">
                <h3>Movie 7</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/8.jpg">
              <div class="m-right">
                <h3>Movie 8</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/1.jpg">
              <div class="m-right">
                <h3>Movie 9</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/2.jpg">
              <div class="m-right">
                <h3>Movie 10</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/3.jpg">
              <div class="m-right">
                <h3>Movie 11</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/4.jpg">
              <div class="m-right">
                <h3>Movie 12</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/5.jpg">
              <div class="m-right">
                <h3>Movie 13</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/6.jpg">
              <div class="m-right">
                <h3>Movie 14</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/7.jpg">
              <div class="m-right">
                <h3>Movie 15</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="m-content"> <img src="img/m/8.jpg">
              <div class="m-right">
                <h3>Movie 16</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia vulputate hendrerit. Suspendisse potenti. Etiam rutrum egestas massa, ut facilisis magna tristique nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mc2">
      <div class="swiper-container mc-control">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="width:1050px"> <img class="active" src="img/m/1.jpg"> <img src="img/m/2.jpg"> <img src="img/m/3.jpg"> <img src="img/m/4.jpg"> <img src="img/m/5.jpg"> <img src="img/m/6.jpg"> <img src="img/m/7.jpg"> <img src="img/m/8.jpg"> <img src="img/m/1.jpg"> <img src="img/m/2.jpg"> <img src="img/m/3.jpg"> <img src="img/m/4.jpg"> <img src="img/m/5.jpg"> <img src="img/m/6.jpg"> <img src="img/m/7.jpg"> <img src="img/m/8.jpg"> </div>
        </div>
      </div>
    </div>
  </div>
  
</div>
<footer>
  <p style="text-align: center;">2012-2013 &copy; Swiper by <a href="http://www.idangero.us/">iDangero.us</a></p>
</footer>
</body>
</html>
